<template>
  <!-- 权限管理下的权限列表 -->
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="authName" label="权限名"> </el-table-column>
      <el-table-column prop="path" label="权限路径"> </el-table-column>

      <el-table-column prop="address" label="权限等级">
        <!-- 判断当数据中的level==多少的时候为一级二级还是三级 -->
        <template slot-scope="tableData">
          <div>
            <div v-if="tableData.row.level == '0'">
              <div class="is" style="background: #33ff33">一级</div>
            </div>
            <div v-if="tableData.row.level == '1'">
              <div class="is" style="background: #8a2be2">二级</div>
            </div>
            <div v-if="tableData.row.level == '2'">
              <div class="is" style="background: #ff0000">三级</div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { JuList } from "../../../api/user";
export default {
  name: "JuList",

  data() {
    return {
      tableData: [],
    };
  },
  // 请求权限列表的数据
  mounted() {
    JuList().then((res) => {
      this.tableData = res.data.data;
    });
  },
};
</script>

<style>
.is {
  width: 60px;
  height: 30px;
  margin-top: 6px;
  margin-right: 10px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
}
</style>